<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

    }

    .headbox {
        display: flex;
        width: 100%;
        height: 40px;
        background-color: rgb(240, 108, 122);


    }

    .textHeader {
        /* width: 100%; */
        height: 20px;
        color: #ffff;
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
        margin-left: 27%;
        /* flex: 1; */

    }

    .leftlabel img {
        width: 20px;
        height: 20px;
        margin-top: 10px;
        margin-left: 30px;
        /* background-color: rgb(240, 108, 122); */


    }

    html,
    body {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .anchorbox {
        width: 250px;
        height: 62px;
        /* display: flex; */

        background: #ffffff;
    }

    .msg {
        font-size: 12px;
        position: relative;
        top: 5px;
        height: 16px;
        margin-left: 5px;

        font-weight: 300;
    }

    .anchor-msg {
        position: relative;

        width: 260px;
        height: 200px;
        margin-top: 30px;



    }

    .anchorname {
        font-weight: 500;
        font-size: 15px;
        height: 18px;
        color: black;
        margin-left: 5px;
        padding: 5px 0;

    }

    .price {
        display: flex;
        font-weight: 500;
        font-size: 17px;
        height: 18px;
        color: red;
        margin-left: 5px;
        padding: 5px 0;

    }

    .line {
        font-size: 14px;
        color: gainsboro;
        text-decoration: line-through;
        margin-left: 10px;
    }

    .anchor {
        margin-top: 8px;
    }

    .anchor img {
        width: 250px;
        height: 250px;
    }


    .btn {
        width: 80px;
        height: 35px;
        background-color: rgb(244, 124, 136);
        border-radius: 25px;
        font-size: 13px;
        margin-left: 200px;
        border: none;

    }

    .phone {
        display: flex;
        width: 100px;
        height: 40px;
        justify-content: space-around;
        align-items: center;
    }

    .left {
        width: 40px;
        height: 20px;
        color: #ffff;
        border-radius: 10px;
        background-color: rgb(244, 124, 136);
        text-align: center;
    }

    .right {
        width: 40px;
        height: 20px;
        color: white;
        border-radius: 10px;
        background-color: rgb(220, 168, 13);
        text-align: center;

    }
</style>

<body>
    <header class="headbox">
        <div class="leftlabel">
            <img src="../img/向左_返回.png">

        </div>



    </header>
    <main>

        <div class="anchor">
            <img src="../user.jpg" id="image">
        </div>

        <div class="anchorbox">

            <div class="anchor-msg">
                <div class="price">
                    ￥3855
                    <div class="line">
                        ￥4500
                    </div>
                </div>

                <!-- <div class="phone">
                    <div class="left">
                        手机
                    </div>
                    <div class="right">
                        折扣
                    </div>
                </div> -->
                <div class="anchorname">
                    商品姓名
                </div>
                <div class="msg">
                    介绍信息
                </div>


            </div>

        </div>


    </main>


    <!-- </div> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script>
        // 获取userid
        let data = localStorage.getItem('data');
        let userId = (JSON.parse(data)).account
        console.log(userId);
        //获取的goodsID
        var info = location.search.slice(); // 从location对象中的search属性得到地址栏里 ? 后面的参数   
        let goodsId = info.replace('?', '');
        console.log(goodsId)
        axios.get('http://8.137.157.16:9000/goods/info', { params: { userId: userId, goodsId: goodsId } })
            .then(function (res) {
                console.log(res);
                let detailItem = res.data.data
                document.querySelector('#image').src = detailItem.img
                document.querySelector('.price').innerHTML = `￥ ${detailItem.current_price}`
                document.querySelector('.anchorname').innerHTML = detailItem.title
                document.querySelector('.msg').innerHTML = detailItem.desc_text

            })
            .catch(function (err) { console.log(err); })

        document.querySelector('.leftlabel').addEventListener('click', function () {
            location.href = './商品列表.html'
        })
    </script>

</body>

</html>